<template>
	<view>
		<view class="title">
			<text>密码登录</text>
		</view>

		<view>
			<view style="padding: 45rpx">
				<u-form :model="form" ref="uForm">
					<view style="margin-bottom: 50rpx">
						<u-form-item label="手机号" prop="phone" borderBottom>
							<u-input v-model="form.phone" border="none" placeholder="请输入手机号"></u-input>
						</u-form-item>
					</view>

					<u-form-item label="密码" prop="password" borderBottom>
						<u-input v-model="form.password" type="password" border="none" :passwordIcon="true" placeholder="请输入密码"></u-input>
					</u-form-item>
				</u-form>
			</view>
		</view>

		<view class="text">
			<navigator url="/subpkg/submy/sublogin/phoneLogin" open-type="reLaunch">使用验证码登录</navigator>
		</view>

		<view style="padding: 45rpx; margin-top: 50rpx">
			<!-- <u-button type="success" @click="wxlogin" text="微信授权登录"></u-button> -->

			<u-button color="#00DCB6" @click="login">登 录</u-button>
			<!-- <u-button color="#00DCB6" @click="toMyUser">登 录</u-button> -->
		</view>
	</view>
</template>

<script>
import { phoneLogin } from '@/http/api.js';
import { mapState, mapMutations } from 'vuex';

export default {
	data() {
		return {
			form: {
				phone: '13456789012',
				password: 'ASDasd!123'
			},
			
			rules: {
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码格式不正确',
						// 触发器可以同时用blur和change
						trigger: 'blur'
					}
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
						// 正则判断为字母或数字或特殊字符
						{
							pattern: /^[0-9a-zA-Z!.@]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字',
							trigger: 'blur',
						},
						// 6-8个字符之间的判断
						{
							min: 1,
							max: 10,
							message: '长度在1-10个字符之间',
							trigger: 'blur',
						},
					],
				
				}
		};
	},
	computed: {
		// vuex中的token
		...mapState(['token'])
	},
	// 返回首页
	onNavigationBarButtonTap() {
		uni.reLaunch({
			url: '/pages/home/home'
		});
	},
	methods: {
		...mapMutations(['updateToken']),

		async login() {
			try {
				const { data: res } = await phoneLogin(this.form);
				// console.log(res);

				this.updateToken(res.token);
				uni.setStorageSync('uid', res.id);

				// token获取成功
				if (this.token) {
					uni.$showMsg('登录成功！', 1500);
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/home/home'
						});
					}, 1500);
				} else {
					uni.$showMsg('登录失败！');
				}
			} catch (e) {
				console.log(e);
				uni.$showMsg('请求失败！');
			}
		},
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	
};
</script>

<style scoped>
	::v-deep .u-form-item__body__right__message {
		margin-left: 0 !important;
	}
	
.text {
	font-size: 30rpx;
	color: #bbbbbb;
	position: fixed;
	right: 2%;
}
.title {
	padding-left: 45rpx;
	margin-top: 100rpx;
	font-weight: 600;
	font-size: 50rpx;
	color: #101010;
}
::v-deep .u-form-item__body__left {
	width: 20% !important;
}
</style>
